<template>
  <div class="plotting-control-container">
    <!-- 标绘控制面板 -->
    <div class="plotting-control" :class="{ expanded: isPlottingExpanded }">
      <!-- 控制图标 -->
      <div class="control-icon" @click="togglePlottingPanel" v-if="!isPlottingExpanded" title="标绘工具">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M3 6l9 18 9-18M3 12h18M3 18h18"/>
        </svg>
      </div>

      <!-- 标绘控制面板内容 -->
      <div class="plotting-panel" v-if="isPlottingExpanded">
        <div class="panel-header">
          <h3>标绘工具</h3>
          <div class="close-btn" @click="isPlottingExpanded = false">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
          </div>
        </div>

        <!-- 可滚动内容区域 -->
        <div class="panel-content">
          <!-- 标绘类型分类展示 -->
          <div class="panel-section">
            <h4>标绘类型</h4>
            <div v-for="category in plottingCategories" :key="category.category" class="plotting-category">
              <div class="category-header">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path :d="category.icon"/>
                </svg>
                <span class="category-title">{{ category.category }}</span>
              </div>
              <div class="plotting-button-group">
                <div
                  v-for="plottingType in category.types"
                  :key="plottingType.type"
                  :class="['plotting-btn', { active: currentPlottingType === plottingType.type }]"
                  @click="startPlotting(plottingType.type)"
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path :d="plottingType.icon"/>
                  </svg>
                  {{ plottingType.name }}
                </div>
              </div>
            </div>
          </div>

          <!-- 标绘操作 -->
          <div class="panel-section">
            <h4>操作</h4>
            <div class="operation-button-group">
            <div class="operation-btn" @click="clearPlotting" title="清除所有标绘">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 6l9 18 9-18M3 12h18M3 18h18"/>
              </svg>
              清除
            </div>
            <div class="operation-btn" @click="cancelCurrentPlotting" title="取消当前标绘">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              </svg>
              取消
            </div>
            <div class="style-control" style="justify-content: space-between; width: 100%;">
              <label>属性编辑</label>
              <el-switch 
                v-model="showPropertyEditor" 
                @change="handlePropertyEditorChange" 
                active-text="开" 
                inactive-text="关"
                size="small"
                style="--el-switch-on-color: #13ce66;"
              />
            </div>
          </div>
        </div>

        <!-- 标绘样式 -->
        <div class="panel-section">
          <h4>样式</h4>
          <div class="style-control">
            <label>颜色</label>
            <input type="color" v-model="plottingColor">
          </div>
        </div>
      </div>
      </div>
    </div>
    <!-- 属性编辑器组件 - 放置在单独的容器中，避免与标绘面板重叠 -->
    <div class="property-editor-container" v-if="showPropertyEditor">
      <PropEditor ref="propEditor" :plotManager="plotManager" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { GraphManager } from 'cesium-plotting-symbol'
import PropEditor from './PropEditor.vue'

// Props
const props = defineProps({
  viewer: {
    type: Object,
    required: true
  }
})

// 状态管理
const isPlottingExpanded = ref(false)
const currentPlottingType = ref('')
const plottingColor = ref('#00FF00') // 默认绿色，与示例一致
const plotManager = ref(null)
const createdGraphs = ref([]) // 存储所有创建的图形对象
const propEditor = ref(null) // 属性编辑器引用
const showPropertyEditor = ref(false) // 是否显示属性编辑器

// 存储添加到 canvas 的捕获阶段 dblclick 监听器引用（永久安装）
const canvasDblClickListener = ref(null)

// 标绘类型配置 - 按类别分组展示
const plottingCategories = [
  {
    category: '面类型',
    icon: 'M3 6h18v12H3z',
    types: [
      { type: 'Polygon', name: '多边形', icon: 'M3 6h18v12H3z' },
      { type: 'Rectangle', name: '矩形', icon: 'M3 6h18v12H3z' },
      { type: 'Arrow1', name: '单箭头', icon: 'M12 3L3 12L12 21L21 12L12 3Z' },
      { type: 'Ellipse', name: '椭圆', icon: 'M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9z' },
      { type: 'Circle', name: '圆', icon: 'M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9z' },
      { type: 'SquareArrow', name: '方形箭头', icon: 'M12 3L3 12L12 21L21 12L12 3Z' },
      { type: 'CircleArcArea', name: '圆弧区域', icon: 'M12 3a9 9 0 0 0-9 9h6a3 3 0 0 1 3-3z' },
      { type: 'SectorArea', name: '扇形区域', icon: 'M12 3L3 12L12 12z' },
      { type: 'FlagTriangle', name: '三角旗标', icon: 'M3 3L12 6L3 9z' },
      { type: 'FlagRectangle', name: '矩形旗标', icon: 'M3 3h9v6H3z' },
      { type: 'MultiPartArrow', name: '多段箭头', icon: 'M3 12L7 8L11 12L15 8L19 12' },
      { type: 'PincerAttack', name: '钳形攻击', icon: 'M3 3L12 12L21 3M3 21L12 12L21 21' },
      { type: 'SplineArea', name: '样条区域', icon: 'M3 12C8 5 16 19 21 12' },
      { type: 'ThreePointRectangle', name: '三点矩形', icon: 'M3 6h18v12H3z' }
    ]
  },
  {
    category: '线类型',
    icon: 'M5 12h14',
    types: [
      { type: 'Polyline', name: '直线', icon: 'M5 12h14' },
      { type: 'Bezier1', name: '贝塞尔1', icon: 'M5 12 C5 7, 19 7, 19 12' },
      { type: 'Bezier2', name: '贝塞尔2', icon: 'M5 12 C5 7, 9 3, 19 12' },
      { type: 'BezierN', name: '贝塞尔N', icon: 'M5 12 C5 7, 10 3, 15 12 C20 19, 25 5, 30 12' },
      { type: 'BezierSpline', name: '平滑线', icon: 'M3 12C8 5 16 19 21 12' },
      { type: 'CircleArc', name: '圆弧线', icon: 'M12 3a9 9 0 0 0-9 9h6a3 3 0 0 1 3-3z' },
      { type: 'BeeLine', name: '线段', icon: 'M5 12h14' },
      { type: 'PointLine', name: '点线', icon: 'M5 12h14M10 12m-2 0a2 2 0 1 1 4 0 2 2 0 1 1-4 0M18 12m-2 0a2 2 0 1 1 4 0 2 2 0 1 1-4 0' },
      { type: 'PointSpline', name: '点样条', icon: 'M3 12C8 5 16 19 21 12M8 12m-2 0a2 2 0 1 1 4 0 2 2 0 1 1-4 0M16 12m-2 0a2 2 0 1 1 4 0 2 2 0 1 1-4 0' }
    ]
  },
  {
    category: '点类型',
    icon: 'M12 12m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0',
    types: [
      { type: 'Point', name: '点', icon: 'M12 12m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0' },
      { type: 'Station', name: '地面站', icon: 'M12 12m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0' },
      { type: 'RedFlag', name: '红旗', icon: 'M12 3L9 12L12 15L15 12L12 3Z' },
      { type: 'Image', name: '图片', icon: 'M3 3h18v18H3z' },
      { type: 'Satellite', name: '卫星', icon: 'M12 12m-4 0a4 4 0 1 0 8 0 4 4 0 1 0-8 0' },
      { type: 'PinText', name: '文本标注', icon: 'M12 5v7m0 7l3-3H9l3 3z' },
      { type: 'PinIcon', name: '图标标注', icon: 'M12 5v10m0 4l3-3H9l3 3z' },
      { type: 'PinImage', name: '图片标注', icon: 'M12 5v10m0 4l3-3H9l3 3z' }
    ]
  },
  {
    category: '测量工具',
    icon: 'M5 12h14M10 9l2 3-2 3',
    types: [
      { type: 'DistanceMeasure', name: '距离测量', icon: 'M5 12h14M10 9l2 3-2 3' },
      { type: 'AreaMeasure', name: '面积测量', icon: 'M3 6h18v12H3z' },
      { type: 'AngleMeasure', name: '角度测量', icon: 'M12 3a9 9 0 0 0-9 9h6a3 3 0 0 1 3-3z' },
      { type: 'TriangleMeasure', name: '三角测量', icon: 'M12 3L3 18L21 18L12 3Z' },
      { type: 'SightLine', name: '视线', icon: 'M5 12h14' }
    ]
  }
]

// 初始化标绘管理器
const initPlotManager = () => {
  if (!props.viewer || plotManager.value) return
  
  // 严格按照Gitee示例初始化GraphManager
  // 在创建 GraphManager 之前，包装全局 Worker 构造函数，拦截 postMessage
  // 在遇到 DataCloneError 时对消息进行可序列化清理并重试。
  // 这比直接修改第三方压缩库更稳健，能在库内部仍创建 Worker 时提供保护。
  try {
    const NativeWorker = window.Worker
    if (NativeWorker && !window.__plotting_worker_postmessage_wrapped) {
      const sanitize = (value, seen = new WeakSet()) => {
        if (value === null) return null
        const t = typeof value
        if (t === 'number' || t === 'string' || t === 'boolean') return value
        if (t === 'function') return undefined
        if (Array.isArray(value)) return value.map(v => sanitize(v, seen))
        if (t === 'object') {
          if (seen.has(value)) return undefined
          seen.add(value)
          // Cesium.Cartesian3-ish
          if (typeof value.x === 'number' && typeof value.y === 'number' && typeof value.z === 'number') {
            return [value.x, value.y, value.z]
          }
          // Cartographic-like
          if (typeof value.longitude === 'number' && typeof value.latitude === 'number') {
            return { longitude: value.longitude, latitude: value.latitude, height: value.height }
          }
          const out = {}
          for (const k in value) {
            try {
              const s = sanitize(value[k], seen)
              if (s !== undefined) out[k] = s
            } catch (e) {
              // skip problematic properties
            }
          }
          return out
        }
        return undefined
      }

      const WrappedWorker = function (...args) {
        const w = new NativeWorker(...args)
        try {
          const origPost = w.postMessage.bind(w)
          w.postMessage = function (msg, transfer) {
            try {
              return origPost(msg, transfer)
            } catch (err) {
              // 捕获不可克隆错误并尝试清理后重试
              if (err && (err.name === 'DataCloneError' || /could not be cloned/i.test(err.message || ''))) {
                try {
                  const sanitized = sanitize(msg)
                  return origPost(sanitized, transfer)
                } catch (e2) {
                  console.warn('Worker.postMessage failed after sanitization', e2)
                }
              }
              throw err
            }
          }
        } catch (wrapErr) {
          // 如果无法包装（极少见），仍返回原始 worker
        }
        return w
      }
      WrappedWorker.prototype = NativeWorker.prototype
      window.Worker = WrappedWorker
      window.__plotting_worker_postmessage_wrapped = true
      console.log('已安装 Worker.postMessage 包装器以处理 DataCloneError。')
    }
  } catch (e) {
    console.warn('安装 Worker 包装器时出错:', e)
  }

  plotManager.value = new GraphManager(props.viewer, {
    layerId: 'testbh1',
    editAfterCreate: true,
    // 尽量同时保留库的 useWebWorker 开关（若库遵循此选项，则不再启用 worker）
    useWebWorker: false
  })
  
  // 设置全局事件处理器
  plotManager.value.setGraphFinishHandler((ent) => {
    console.log('图形绘制完成:', ent)
    // 将创建的图形对象添加到数组中
    createdGraphs.value.push(ent)
    currentPlottingType.value = ''
    // 绘制完成后：不再移除全局 dblclick 拦截器（保持永久安装以避免竞态）
  })
  
  // 设置图形选择处理器，用于显示属性编辑器
  plotManager.value.setGraphSelectHandler((ent) => {
    console.log('图形选中:', ent)
    if (propEditor.value && showPropertyEditor.value) {
      if (ent) {
        // 显示属性编辑器并传递选中的图形对象
        propEditor.value.show(true, ent)
        // 打印图形的属性定义和属性值
        console.log("选中图形的属性定义:", ent.propDefs)
        console.log("选中图形的属性值:", ent.props)
      } else {
        // 隐藏属性编辑器
        propEditor.value.show(false, ent)
        console.log("未选中任何图形")
      }
    }
  })
}

// 切换标绘面板显示状态
const togglePlottingPanel = () => {
  isPlottingExpanded.value = !isPlottingExpanded.value
  // 确保标绘管理器已初始化
  initPlotManager()
}

// 开始标绘 - 严格按照Gitee示例的API调用方式
const startPlotting = (type) => {
  if (!plotManager.value) {
    initPlotManager()
    if (!plotManager.value) {
      console.error('Failed to initialize plot manager')
      return
    }
  }
  
  // 如果已经是当前类型，则取消标绘
  if (currentPlottingType.value === type) {
    cancelCurrentPlotting()
    return
  }
  
  // 取消当前可能存在的标绘
  cancelCurrentPlotting()
  
  // 设置当前标绘类型
  currentPlottingType.value = type
  
  try {
    // 确保永久安装 dblclick 拦截器以在绘制期间结束绘制并阻止相机响应
    ensurePermanentDblClickInterceptor()
    
    // 严格按照Gitee示例的create方法调用格式
    plotManager.value.create({
      obj: type,
      color: plottingColor.value
      // 注意：示例中没有width和opacity参数
    })
  } catch (error) {
    console.error('Error starting plotting:', error)
    currentPlottingType.value = ''
    // 发生错误时无需移除全局拦截器（它是永久安装的）
  }
}

// 取消当前标绘 - 根据Gitee示例的API调整
const cancelCurrentPlotting = () => {
  if (plotManager.value) {
    try {
      // 根据库的行为，通常可以通过再次调用create方法来取消当前操作
      currentPlottingType.value = ''
      // 取消标绘后，保持全局 dblclick 拦截器（无需移除）
    } catch (error) {
      console.error('Error cancelling plotting:', error)
      // 发生错误时也要恢复双击事件
      // 拦截器为永久安装，无需移除
    }
  }
}

// 清除所有标绘 - 根据库的实际API使用delete方法
const clearPlotting = () => {
  if (plotManager.value) {
    try {
      // 调试：输出可用方法，了解API
      console.log('PlotManager available methods:', Object.keys(plotManager.value))
      
      // 优先使用用户指定的delete方法来清除每个图形对象
      if (typeof plotManager.value.delete === 'function' && createdGraphs.value.length > 0) {
        // 遍历并删除所有创建的图形
        createdGraphs.value.forEach(graph => {
          try {
            plotManager.value.delete(graph)
          } catch (deleteError) {
            console.error('Error deleting individual graph:', deleteError)
          }
        })
        console.log('Used delete method for each graph')
        // 清空图形数组
        createdGraphs.value = []
      } else if (typeof plotManager.value.deleteAll === 'function') {
        // 备选方法1: clearAll
        plotManager.value.deleteAll()
        createdGraphs.value = []
        console.log('Used clearAll method')
      } else if (typeof plotManager.value.clean === 'function') {
        // 备选方法2: clear
        plotManager.value.clean()
        createdGraphs.value = []
        console.log('Used clear method')
      } else if (typeof plotManager.value.removeAll === 'function') {
        // 备选方法3: removeAll
        plotManager.value.removeAll()
        createdGraphs.value = []
        console.log('Used removeAll method')
      } else {
        console.warn('No valid method found to clear plots.')
        // 即使没有找到合适的方法，也清空本地图形数组
        createdGraphs.value = []
      }
    } catch (error) {
      console.error('Error clearing plots:', error)
    }
  }
  currentPlottingType.value = ''
}

// 处理属性编辑器开关状态变化
const handlePropertyEditorChange = (value) => {
  showPropertyEditor.value = value
  if (propEditor.value) {
    // 无论显示还是隐藏，都明确调用propEditor的show方法同步状态
    propEditor.value.show(value, currentGraph.value)
    console.log('属性编辑器状态已切换为:', value ? '显示' : '隐藏')
  }
}

// 安装一个一次性的、永久的捕获阶段 dblclick 拦截器，用于在任意绘制期间结束绘制并阻止相机响应。
// 这样可以避免多次连续绘制时因为过早移除监听器导致的相机双击行为。
const ensurePermanentDblClickInterceptor = () => {
  if (!props.viewer) return
  const scene = props.viewer.scene
  if (!scene) return
  const canvas = scene.canvas
  if (!canvas) return

  if (canvasDblClickListener.value) return

  const listener = function (e) {
    try {
      // 判断当前是否处于绘制模式：优先检查当前类型，再尝试库方法/内部字段
      let drawingActive = !!currentPlottingType.value
      try {
        if (!drawingActive && plotManager.value) {
          if (typeof plotManager.value.isCreating === 'function') {
            drawingActive = !!plotManager.value.isCreating()
          } else if (plotManager.value._isCreating !== undefined) {
            drawingActive = !!plotManager.value._isCreating
          } else if (plotManager.value._creating !== undefined) {
            drawingActive = !!plotManager.value._creating
          }
        }
      } catch (inner) {
        // ignore
      }

      if (drawingActive && plotManager.value) {
        // 尝试库中可能的完成函数
        if (typeof plotManager.value.finishDrawing === 'function') {
          plotManager.value.finishDrawing()
        } else if (typeof plotManager.value.finish === 'function') {
          plotManager.value.finish()
        } else if (typeof plotManager.value.endCreate === 'function') {
          plotManager.value.endCreate()
        } else {
          console.warn('plotManager 没有发现 finish 方法，不能自动结束绘制。可用方法:', Object.keys(plotManager.value || {}))
        }

        // 阻止事件继续传播到 Cesium，避免相机响应
        e.preventDefault()
        e.stopPropagation()
      }
    } catch (err) {
      console.error('双击处理器内部错误:', err)
    }
  }

  canvas.addEventListener('dblclick', listener, true)
  canvasDblClickListener.value = listener
  console.log('已在 canvas 上永久安装捕获阶段 dblclick 监听器以支持绘制结束并阻止相机响应')
}

// 监听viewer变化
watch(() => props.viewer, (newViewer) => {
  if (newViewer) {
    initPlotManager()
  }
})
</script>

<style scoped>
.plotting-control-container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.plotting-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: all 0.3s ease;
}

.control-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 
    0 8px 32px rgba(102, 126, 234, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  color: white;
}

.control-icon:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(102, 126, 234, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.plotting-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.15) 0%, rgba(30, 41, 59, 0.15) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px;
  width: 280px; /* 增加面板宽度 */
  max-height: 70vh; /* 限制最大高度为视口高度的70% */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s ease;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* 可滚动内容区域 */
.panel-content {
  max-height: calc(70vh - 80px); /* 减去头部高度 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 自定义滚动条样式 */
.panel-content::-webkit-scrollbar {
  width: 6px;
}

.panel-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 分类相关样式 */
.plotting-category {
  margin-bottom: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.plotting-category:last-child {
  margin-bottom: 0;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 属性编辑器容器样式 */
.property-editor-container {
  position: absolute;
  bottom: 20px;
  right: 20px; /* 将属性编辑器放置在右下角 */
  z-index: 1001; /* 确保在标绘面板上方 */
  width: 280px;
  max-height: 70vh;
  overflow-y: auto;
}

/* 自定义属性编辑器容器滚动条样式 */
.property-editor-container::-webkit-scrollbar {
  width: 6px;
}

.property-editor-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.property-editor-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.property-editor-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.plotting-control.expanded .plotting-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.panel-header h3 {
  margin: 0;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.panel-section {
  margin-bottom: 20px;
}

.panel-section h4 {
  margin: 0 0 12px 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.plotting-button-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 从2列改为3列布局 */
  gap: 6px;
}

.plotting-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
  font-weight: 500;
}

.plotting-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.plotting-btn.active {
  background: linear-gradient(135deg, #ff4d4f 0%, #f90 100%);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 77, 79, 0.3);
}

.operation-button-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.operation-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 11px;
  font-weight: 500;
}

.operation-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(2px);
}

.style-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.style-control label {
  width: 60px;
}

.style-control input[type="color"] {
  width: 30px;
  height: 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
</style>